<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
</head>
<body>
<div class="ui container">
    <div class="ui top aligned teal segment">
        <p class="ui middle aligned attached">CRUD-INPUT</p>
    </div>
    <form class="ui form" action="#" th:object="${permission}" th:action="${permission.permission_id}==null ?  @{/insertPermission} : @{/updatePermission/{id}(id=${permission.permission_id})}"  method="post">
        <div class="field">
            <label>权限名称</label>
            <input type="text" name="permission_name" th:value="${permission.permission_name}" placeholder="权限名称">
        </div>
        <div class="field">
            <label>权限状态</label>
            <div class="ui selection dropdown" style="width: 80px">
                <input type="hidden" name="permission_status" th:value="${permission.permission_status}">
                <i class="dropdown icon"></i>
                <div class="default text">权限状态</div>
                <div class="menu">
                    <div class="item" data-value="使用">使用</div>
                    <div class="item" data-value="禁用">禁用</div>
                </div>
            </div>
        </div>
        <button class="ui teal button" type="submit">完成</button>
        <div class="ui error message"></div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script>

    $('.dropdown')
        .dropdown({
            clearable: true
        })
    ;
</script>
</body>
</html>